// vbs直接生成框架结构
<template>
  <div>
    <h2>{{ title }}</h2>
    <!-- 表格 -->
    <table border="1">
      <tr>
        <th>#</th>
        <th>课程</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
      </tr>

      <tr v-for="(item, index) in cart" :key="index">
        <!-- 是否选中 -->
        <td>
          <input type="checkbox" v-model="item.active" />
        </td>
        <!-- 课程 -->
        <td>{{ item.title }}</td>
        <!-- 单价 -->
        <td>{{ item.price }}</td>
        <!-- 数量 -->
        <td>
          <button @click="substract(index)">-</button>
          {{ item.count }}
          <button @click="add(index)">+</button>
        </td>
        <!-- 总价 -->
        <td>{{ item.price * item.count }}</td>
      </tr>

      <tr>
        <td></td>
        <!-- 横向合并两个单元格 -->
        <td colspan="2">{{ activeCount }}/{{ count }}</td>
        <!-- 横向合并两个单元格 -->
        <td colspan="2">￥{{ total }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "cart",
  props: ["title"],
  data() {
    return {
      cart:[],
    }
  },
// 监听
watch:{
   cart:{
    //  n 新值  o 旧值
     handler(n){
       this.setLocalData(n);
     },
     deep:true
   }
},
  created() {
    // 接収通信
    this.$bus.$on('addcart',good=>{
      const ret = this.cart.find(v=>v.id===good.id);
      if(!ret){
        // 购物车没有数据
        this.cart.push(good)

      }else{
        ret.count += 1
      }

    })
  },
//   方法
methods: {

  setLocalData(){
     
  },
    // 删除课程
    remove(i){
        // 先提示是否确认删除 splice（i，1）删除当前下的1个
      if(window.confirm('是否确认删除？')){
          this.cart.splice(i,1)
      }  
    },
    // 减法
    substract(i){
      let count = this.cart[i].count
    //   count大于1时 执行减法 最小为1时 再点击会执行remove方法
      count > 1 ? this.cart[i].count -= 1 : this.remove(i)
    },
    // 加法
    add(i) {
        this.cart[i].count++;
    }
},
  // 计算属性
  computed: {
    //   计算数量
    count() {
      return this.cart.length;
    },
    // 计算课程
    activeCount() {
      return this.cart.filter((v) => v.active).length;
    },
    // 计算总价
    total() {
      //   let sum = 0;
      //   this.cart.forEach((cart) => {
      //     //  如果active的值为true 执行
      //     if (cart.active) {
      //       sum += cart.price * cart.count;
      //     }
      //   });
      //   return sum
      return this.cart.reduce((sum, cart) => {
        if (cart.active) {
          sum += cart.price * cart.count;
        }
        return sum;
      }, 0);
    },
  },
};
</script>

<style scoped>
</style>